<template>
  <el-tabs v-model="state.active">
    <el-tab-pane name="1" label="1">
      <form-designer></form-designer>
    </el-tab-pane>
    <el-tab-pane name="2" label="2">
      <form-render
        :form-JSON="state.formJSON"
        ref="formRenderRef"
      ></form-render>
      <!-- <el-button @click="showValue">showValue</el-button> -->
      <el-table :data="formRenderRef?.designer.tableData" stripe>
        <el-table-column
          v-for="(item, index) in state.columnList"
          :key="index"
          align="center"
          :label="item.label"
          :prop="item.prop"
          show-overflow-tooltip
          :width="item.width"
        ></el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import formDesigner from '@/components/form-designer/index.vue'
import FormRender from '@/components/form-render/index.vue'
import { onMounted, reactive, ref } from 'vue'
const state = reactive({
  active: '1',
  formJSON: {
    widgetList: [
      {
        type: 'grid',
        options: {
          propName: 'grid26633615',
          hidden: false,
          colHeight: '50',
          optionItem: [],
          gutter: 0,
          justify: '',
          align: '',
          originPropName: 'grid26633615',
        },
        category: 'container',
        cols: [
          {
            type: 'grid-col',
            options: {
              propName: 'grid-col84592467',
              span: 8,
              offset: 0,
              push: 0,
              pull: 0,
              originPropName: 'grid-col84592467',
            },
            category: 'container',
            widgetList: [
              {
                type: 'input',
                options: {
                  propName: 'name',
                  defaultValue: '',
                  label: '客户姓名',
                  labelAlign: 'left',
                  labelWidth: '80',
                  labelHidden: false,
                  isRequired: false,
                  requiredMessage: '请输入',
                  rule: '',
                  errorMessage: '',
                  value: '',
                  displayType: 'text',
                  size: 'default',
                  placeholder: '请输入',
                  readonly: false,
                  disabled: false,
                  clearable: false,
                  hidden: false,
                  onBlur: '',
                  onFocus: '',
                  onChange: '',
                  onInput: '',
                  onClear: '',
                  originPropName: 'name',
                },
              },
              {
                type: 'date-range',
                options: {
                  propName: 'createTimes',
                  defaultValue: '',
                  label: '申请时间',
                  labelAlign: 'left',
                  labelWidth: '80',
                  labelHidden: false,
                  isRequired: false,
                  requiredMessage: '请输入',
                  value: [
                    '2023-11-11T16:00:00.000Z',
                    '2023-11-12T16:00:00.000Z',
                  ],
                  widgetSize: 'small',
                  size: 'default',
                  disabled: false,
                  placeholder: '请选择',
                  clearable: true,
                  hidden: false,
                  format: 'YYYY/MM/DD',
                  rangeSeparator: '至',
                  onChange:
                    'this.reqData = {\n  page: {\n    pageNo: 1,\n    pageSize: 10\n  },\n  req: {\n    startDate: val[0],\n    endDate: val[1]\n  }\n}',
                  originPropName: 'createTimes',
                },
              },
            ],
          },
          {
            type: 'grid-col',
            options: {
              propName: 'grid-col99256369',
              span: 8,
              offset: 0,
              push: 0,
              pull: 0,
              originPropName: 'grid-col99256369',
            },
            category: 'container',
            widgetList: [
              {
                type: 'input',
                options: {
                  propName: 'mobile',
                  defaultValue: '',
                  label: '手机号码',
                  labelAlign: 'left',
                  labelWidth: '80',
                  labelHidden: false,
                  isRequired: false,
                  requiredMessage: '请输入',
                  rule: '',
                  errorMessage: '',
                  value: '',
                  displayType: 'text',
                  size: 'default',
                  placeholder: '请输入',
                  readonly: false,
                  disabled: false,
                  clearable: false,
                  hidden: false,
                  onBlur: '',
                  onFocus: '',
                  onChange: '',
                  onInput: '',
                  onClear: '',
                  originPropName: 'mobile',
                },
              },
              {
                type: 'input',
                options: {
                  propName: 'no',
                  defaultValue: '',
                  label: '申请ID',
                  labelAlign: 'left',
                  labelWidth: '80',
                  labelHidden: false,
                  isRequired: false,
                  requiredMessage: '请输入',
                  rule: '',
                  errorMessage: '',
                  value: '',
                  displayType: 'text',
                  size: 'default',
                  placeholder: '请输入',
                  readonly: false,
                  disabled: false,
                  clearable: false,
                  hidden: false,
                  onBlur: '',
                  onFocus: '',
                  onChange: '',
                  onInput: '',
                  onClear: '',
                  originPropName: 'no',
                },
              },
            ],
          },
          {
            type: 'grid-col',
            options: {
              propName: 'grid-col14474139',
              span: 8,
              offset: 0,
              push: 0,
              pull: 0,
              originPropName: 'grid-col14474139',
            },
            category: 'container',
            widgetList: [
              {
                type: 'input',
                options: {
                  propName: 'plateNo',
                  defaultValue: '',
                  label: '车牌号码',
                  labelAlign: 'left',
                  labelWidth: '80',
                  labelHidden: false,
                  isRequired: false,
                  requiredMessage: '请输入',
                  rule: '',
                  errorMessage: '',
                  value: '',
                  displayType: 'text',
                  size: 'default',
                  placeholder: '请输入',
                  readonly: false,
                  disabled: false,
                  clearable: false,
                  hidden: false,
                  onBlur: '',
                  onFocus: '',
                  onChange: '',
                  onInput: '',
                  onClear: '',
                  originPropName: 'plateNo',
                },
              },
              {
                type: 'button',
                options: {
                  propName: 'button106167959',
                  name: 'button',
                  value: '',
                  widgetSize: 'small',
                  size: 'default',
                  type: 'primary',
                  disabled: false,
                  readonly: false,
                  hidden: false,
                  onClick:
                    "console.log(this.reqData)\nconst reqData = JSON.parse(this.getJSON())\nObject.assign(this.reqData.req, reqData)\naxios.post('http://web-admin-clue-uat.cangoelectronics.com/api/carMortgage/findUserApplyPage', this.reqData, {\n  headers: {\n    Cluetoken: '018bb211be921c848a7280fa8b1c3f64'\n  }\n}).then(res => {\n  this.tableData = res.data.obj.results\n})",
                  url: '',
                  loading: false,
                  originPropName: 'button106167959',
                },
              },
            ],
          },
        ],
      },
    ],
    formConfig: {
      formDataName: 'formData',
      formRefName: 'formRef',
      formRulesName: 'formRules',
      formLabelWidth: 80,
      baseURL: '',
      onFormCreated: '',
      onFormMounted: '',
    },
  },
  tableData: [],
  columnList: [
    { label: '申请ID', prop: 'no', width: '' },
    { label: '客户姓名', prop: 'name', width: '' },
    { label: '手机号码', prop: 'mobile', width: '' },
    { label: '车牌号码', prop: 'plateNo', width: '' },
    {
      label: '申请时间',
      prop: 'createTime',
      width: '',
      type: 'time',
      sortable: true,
    },
  ],
})
const formRenderRef = ref()
// const showValue = () =>{
//   console.log(formRenderRef.value.designer)
// }
onMounted(() => {
  console.log(formRenderRef.value.designer)
})
console.log('auto deploy by CI/CD')
</script>
<style scoped></style>
